<%@ page import="org.beholder.ControlServlet" %>
<%@ page import="java.util.Date" %>
<%@ include file = "top.jsp"%>
<head>
    <script type="text/javascript">
    //<![CDATA[
    window.onload = function() {
    	img = document.getElementById('preview');
    	img.src += "?";
    	setInterval("img.src=img.src.replace(/\\?[0-9]*/, '?'+Math.floor(Math.random()*9999999+1));", 500);
    }
    //]]>
    </script>
<style>
.povorot90 {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform-origin:120 100;
}
.povorot180 {
  -moz-transform: rotate(180deg);  /* Firefox */
  -o-transform: rotate(180deg);  /* Opera */
  -webkit-transform: rotate(180deg);  /* Safari y Chrome */
  -webkit-transform-origin:180 120;
}
.povorot270 {
  -ms-transform: rotate(-90deg); /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari and Chrome */
  -o-transform: rotate(-90deg); /* Opera */
  -moz-transform: rotate(-90deg); /* Firefox */
  -webkit-transform-origin:120 100;
}
.povorot0 {
}
</style>

</head>
<table cellspacing="30">
    <tr>
        <td>
            <img width="360" height="240" border="1" src="preview" id="preview">
        </td>
        <td valign="top" style="font-size:12px;font-family:monospace">
            <form action="control" method="get">
                <input type="radio" style="font-size:36" 
                       name="<%=ControlServlet.STATE_PARAM%>"
                       value="<%=ControlServlet.STATE_PRW%>"
                        <%=(ControlServlet.STATE_PRW.equals(request.getAttribute(ControlServlet.STATE_PARAM))?"checked":"")%>
                       onchange="javascript:this.form.submit()">PRW&nbsp;
                <input type="radio" style="font-size:36"
                       name="<%=ControlServlet.STATE_PARAM%>"
                       value="<%=ControlServlet.STATE_REC%>"
                        <%=(ControlServlet.STATE_REC.equals(request.getAttribute(ControlServlet.STATE_PARAM))?"checked":"")%>
                       onchange="javascript:this.form.submit()">REC&nbsp;
                <input type="radio" style="font-size:36" 
                       name="<%=ControlServlet.STATE_PARAM%>"
                       value="<%=ControlServlet.STATE_HD%>"
                        <%=(ControlServlet.STATE_HD.equals(request.getAttribute(ControlServlet.STATE_PARAM))?"checked":"")%>
                       onchange="javascript:this.form.submit()">HD&nbsp;
                <hr>
                Current Time:<%=new Date()%><br>
                Preview Time:<%=request.getAttribute("date")%><br>
            </form>
		<hr>
		<button onclick="javascript:document.getElementById('preview').setAttribute('class','povorot0');">Orig</button>&nbsp;
		<button onclick="javascript:document.getElementById('preview').setAttribute('class','povorot90');">Counter Clock Wise</button>&nbsp;
		<button onclick="javascript:document.getElementById('preview').setAttribute('class','povorot180');">Upside Down</button>&nbsp;
		<button onclick="javascript:document.getElementById('preview').setAttribute('class','povorot270');">Clock Wise</button>&nbsp;
		
        </td>
    </tr>
</table>